<template>
	<view class="container">
		<scroll-view scroll-y class="scroll-content">
			<view class="info-section">
				<view class="base-info">
					<image v-if="imageArray.length" class="app-logo" :src="getFullImageUrl(imageArray[0])"
						mode="aspectFit" />
					<view class="app-details">
						<text class="app-title">{{appDetail.title}}</text>
						<text class="app-developer">开发商：{{appDetail.vendor}}</text>
						<view class="rating-bar">
							<view class="rating-info">
								<tui-rate active="#FACC15" :size="15" :current="appDetail.rating" disabled
									:score="appDetail.rating"></tui-rate>
								<text
									style="font-size: 12px;color: #9ca3af;margin-left: 5rpx;">{{appDetail.rating}}分</text>
							</view>
							<text class="separator">|</text>
							<text class="download-count">{{appDetail.dcount}}次下载</text>
						</view>
					</view>
				</view>
				<view class="spec-tags">
					<view class="spec-item">
						<text class="spec-value">{{appDetail.pkgSize}}</text>
						<text class="spec-label">大小</text>
					</view>
					<view class="spec-item">
						<text class="spec-value">{{appDetail.version}}</text>
						<text class="spec-label">版本</text>
					</view>
					<view class="spec-item">
						<text class="spec-value">{{appDetail.category}}</text>
						<text class="spec-label">分类</text>
					</view>
					<view class="spec-item">
						<text class="spec-value">免费</text>
						<text class="spec-label">价格</text>
					</view>
				</view>
				<view class="os-support">
					<text class="os-title">支持操作系统</text>
					<view style="display: flex; flex-wrap: wrap; gap: 20rpx; margin-top: 16rpx;">
						<view v-for="os in osList" :key="os.value"
							style="display: flex; align-items: center; gap: 8rpx; padding: 8rpx 16rpx; background: #f5f5f5; border-radius: 999rpx;">
							<image :src="os.icon" style="width: 36rpx; height: 36rpx;" mode="aspectFit" />
							<text style="font-size: 13px; color: #555;">{{ os.label }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="screenshot-section">
				<text class="section-title">软件截图</text>
				<scroll-view scroll-x class="screenshot-scroll">
					<view class="screenshot-list">
						<view class="screenshot-item" v-for="(url,index) in imageArray.slice(1)" :key="index"
							@click="preview(index)">
							<image :src="getFullImageUrl(url)" mode="aspectFit" />
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="section-padding">
				<!--markdown渲染(table表格)-->
				<!-- <uParse :content="appDetail.introduction || ''"/> -->
				
				<!--html渲染(table表格)-->
				<uParse :content="appDetail.introduction || ''" />
				
			</view>
			<!-- 	<view class="section-padding">
				<text class="section-title">教程视频</text>
				<view class="video-grid">
					<view class="video-item">
						<view class="video-placeholder">
							<text class="fas fa-play-circle text-gray-400 video-play-icon"></text>
						</view>
						<text class="video-title">Office 2021 安装与激活教程</text>
					</view>
					<view class="video-item">
						<video :src="localVideoUrl" controls class="uni-video-player" poster="">
							<text>您的浏览器不支持视频播放。</text>
						</video>
						<text class="video-title">功能快速上手演示</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="section-padding">
				<text class="section-title">安装步骤</text>
				<view class="step-list">
					<view v-for="step in installSteps" :key="step.num" class="step-item">
						<view class="step-num-circle">{{ step.num }}</view>
						<view>
							<text class="step-title-text">{{ step.title }}</text>
							<text class="step-desc-text">{{ step.desc }}</text>
						</view>
					</view>
				</view>
			</view> -->
		</scroll-view>
		<view class="fixed-download-bar">
			<!-- <view class="download-info">
				<text class="download-title">免费下载</text>
				<text class="download-subtitle">多种下载方式可选</text>
			</view> -->
			<!-- <button :class="['download-btn', { 'btn-loading': isDownloading }]" :disabled="isDownloading"
				@click="handleDownload">
				<text v-if="!isDownloading">看广告获取下载链接</text>
				<text v-else>正在拉起广告…</text>
			</button> -->
			<button class="download-btn" @click="handleDownload">
				<text>获取下载链接</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	
	import marked from '@/components/marked'
	import uParse from '@/components/uParse/src/wxParse'
	
	import api from '@/utils/api.js'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		baseConfig
	} from '@/utils/request.js';
	const appDetail = reactive({})
	const imageArray = ref([])
	const getFullImageUrl = (url) => {
		if (url == '') {
			return '/static/logo.jpg'
		} else {
			return baseConfig.baseURL + '/api/images/' + url;
		}
	};

	function preview(idx) {
		const urls = imageArray.value.slice(1).map(getFullImageUrl)
		uni.previewImage({
			urls,
			current: urls[idx],
			indicator: 'number'
		})
	}

	// --- 状态数据 ---
	// const localVideoUrl = ref('https://example.com/video.mp4'); // 替换为真实的视频地址
	const isDownloading = ref(false);
	// const downloadLink = 'https://example.com/download/office2021'; // 真实的下载链接

	// const installSteps = ref([{
	// 		num: 1,
	// 		title: '下载安装包',
	// 		desc: '点击下载按钮获取 Office 2021 安装文件'
	// 	},
	// 	{
	// 		num: 2,
	// 		title: '运行安装程序',
	// 		desc: '双击下载的安装文件，以管理员身份运行'
	// 	},
	// 	{
	// 		num: 3,
	// 		title: '选择安装选项',
	// 		desc: '根据需要选择要安装的组件和安装路径'
	// 	},
	// 	{
	// 		num: 4,
	// 		title: '完成安装',
	// 		desc: '等待安装完成，首次启动时进行激活'
	// 	},
	// ]);


	/* 平台对照表（与发布页保持一致） */
	const platformMap = [{
			label: 'macOS',
			value: 'macos',
			icon: '/static/ios.png'
		},
		{
			label: 'Windows',
			value: 'windows',
			icon: '/static/windows.png'
		},
		{
			label: 'Android',
			value: 'android',
			icon: '/static/android.png'
		},
		{
			label: 'Linux',
			value: 'linux',
			icon: '/static/linux.png'
		}
	]

	/* 计算属性：把字符串 → 对象数组 → 只保留存在的平台 */
	const osList = computed(() => {
		if (!appDetail.supportSys) return [] // 空值保护
		const codes = appDetail.supportSys.split(',').map(v => v.trim())
		return platformMap.filter(p => codes.includes(p.value))
	})

	onLoad(async (options) => {
		try {
			const result = await api.app.getDetail(options.id)
			if (result.code && result.code == 200) {
				// ✅ 正确赋值
				Object.assign(appDetail, result.data.software)
				imageArray.value = result.data.images
			}
		} catch (error) {
			console.error('查找失败:', error)
		}
	})

	const handleDownload = () => {
		// uni.navigateTo({
		// 	url: `/pages/download/download?id=${id}`
		// });
		uni.navigateTo({
			url: `/pages/temp/temp?id=${appDetail.id}`
		});
	}

	// 模拟激励视频广告和下载逻辑
	// const handleDownload = async () => {
	// if (isDownloading.value) return;

	// isDownloading.value = true;
	// console.log('正在拉起广告…');

	// // 模拟广告播放逻辑 (在 UniApp 中，您应调用 uni.createRewardedVideoAd() )
	// try {
	// 	// 模拟播放广告时间
	// 	uni.showToast({
	// 		title: '模拟播放广告中...',
	// 		icon: 'none',
	// 		duration: 3000
	// 	});
	// 	await new Promise(resolve => setTimeout(resolve, 3000));

	// 	// 广告播放完成，跳转到下载链接解锁页
	// 	const targetUrl = `/pages/download-unlock/index?url=${encodeURIComponent(downloadLink)}`;
	// 	uni.navigateTo({
	// 		url: targetUrl
	// 	});

	// } catch (error) {
	// 	console.error('广告或下载流程出错:', error);
	// 	uni.showToast({
	// 		title: '获取失败，请重试',
	// 		icon: 'none'
	// 	});
	// } finally {
	// 	isDownloading.value = false;
	// }
	// };

	// 分享朋友
	// onShareAppMessage(() => {
	// 	return {
	// 		title: '轻松卖好车，省心又省力',
	// 		path: '/pages/tabBar/sell/sell',
	// 		imageUrl: '/static/m4b.png',
	// 	};
	// })
	// // 分享朋友圈
	// onShareTimeline(() => {
	// 	return {
	// 		title: '轻松卖好车，省心又省力',
	// 		path: '/pages/tabBar/sell/sell',
	// 		imageUrl: '/static/m4b.png',
	// 	};
	// })
</script>

<style scoped>
	.container {
		background-color: #f9fafb;
	}

	.scroll-content {
		flex: 1;
		/* 预留出底部下载栏的高度 */
		padding-bottom: 200rpx;
	}

	.bottom-padding-spacer {
		height: 120rpx;
		/* 额外的底部空间，防止内容底部被 fixed 栏遮挡 */
	}

	.section-padding {
		background-color: #ffffff;
		margin-top: 16rpx;
		padding: 32rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 32rpx;
		display: block;
	}


	/* --- 软件基本信息 --- */
	.info-section {
		background-color: #ffffff;
		padding: 32rpx;
	}

	.base-info {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 32rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #f3f4f6;
	}

	.app-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.logo-icon {
		color: #2563eb;
		font-size: 60rpx;
	}

	.app-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.app-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #1f2937;
		display: block;
	}

	.app-developer {
		color: #6b7280;
		margin-top: 8rpx;
		display: block;
		font-size: 28rpx;
	}

	.rating-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 32rpx;
		margin-top: 16rpx;
	}

	.rating-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8rpx;
	}

	.download-count {
		font-size: 14px;
		color: #4b5563;
		font-weight: 500;
	}

	.separator {
		color: #9ca3af;
	}

	/* 软件信息标签 */
	.spec-tags {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		padding-top: 32rpx;
		border-top: 1rpx solid #f3f4f6;
	}

	.spec-item {
		text-align: center;
		flex: 1;
	}

	.spec-value {
		font-size: 16px;
		font-weight: bold;
		color: #1f2937;
		display: block;
	}

	.spec-label {
		font-size: 28rpx;
		color: #6b7280;
		display: block;
	}

	/* 支持操作系统 */
	.os-support {
		margin-top: 32rpx;
	}

	.os-title {
		font-size: 28rpx;
		color: #6b7280;
		margin-bottom: 16rpx;
		display: block;
	}


	/* --- 软件截图 --- */
	.screenshot-section {
		background-color: #ffffff;
		margin-top: 16rpx;
		padding: 32rpx;
	}

	.screenshot-scroll {
		white-space: nowrap;
		width: 100%;

	}

	.screenshot-list {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
	}

	.screenshot-item {
		width: 384rpx;
		height: 256rpx;
		background-color: #e5e7eb;
		border-radius: 24rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.screenshot-placeholder {
		color: #9ca3af;
		font-size: 40rpx;
	}


	/* --- 软件描述 --- */
	.app-description {
		color: #4b5563;
		line-height: 1.6;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		font-size: 28rpx;
	}

	.desc-paragraph {
		display: block;
	}

	.desc-subtitle {
		font-weight: bold;
		color: #1f2937;
		display: block;
	}

	.desc-list {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		padding-left: 32rpx;
	}

	.desc-list-item {
		position: relative;
		padding-left: 20rpx;
		display: block;
	}

	.desc-list-item::before {
		content: '';
		position: absolute;
		left: 0;
		top: 14rpx;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: #4b5563;
	}


	/* --- 教程视频 --- */
	.video-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.video-item {
		width: 48%;
		background-color: #f3f4f6;
		border-radius: 24rpx;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.video-placeholder,
	.uni-video-player {
		width: 100%;
		height: 190rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.video-play-icon {
		font-size: 60rpx;
	}

	.video-title {
		font-size: 28rpx;
		color: #4b5563;
		display: block;
		word-break: break-word;
	}


	/* --- 安装步骤 --- */
	.step-list {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.step-item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 24rpx;
	}

	.step-num-circle {
		width: 48rpx;
		height: 48rpx;
		background-color: #4f46e5;
		color: #ffffff;
		border-radius: 9999rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		flex-shrink: 0;
	}

	.step-title-text {
		font-weight: 500;
		color: #1f2937;
		font-size: 32rpx;
		display: block;
	}

	.step-desc-text {
		font-size: 28rpx;
		color: #4b5563;
		display: block;
		margin-top: 4rpx;
	}


	/* --- 底部下载栏 --- */
	.fixed-download-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e5e7eb;
		padding: 32rpx;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));

		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
		z-index: 10;
	}

	.download-info {
		flex: 1;
	}

	.download-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
		display: block;
	}

	.download-subtitle {
		font-size: 28rpx;
		color: #6b7280;
		display: block;
	}

	.download-btn {
		background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		padding: 24rpx 48rpx;
		border-radius: 32rpx;
		font-weight: bold;
		font-size: 36rpx;
		box-shadow: 0 10rpx 15rpx -3rpx rgba(0, 0, 0, 0.1), 0 4rpx 6rpx -4rpx rgba(0, 0, 0, 0.05);
		line-height: 1;
		border: none;
		flex-shrink: 0;
	}

	.download-btn::after {
		border: none;
	}

	.download-btn[disabled],
	.btn-loading {
		opacity: 0.8;
	}
</style>